<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全局代码查找变量(Global code lookup variables)</title>
  <!-- 
  在JavaScript中，"全局代码查找变量"（Global Code Lookup Variables）指的是在全局作用域中定义的变量和函数。全局作用域是指在任何函数或块内部之外声明的变量和函数，这些变量和函数可以在整个脚本中被访问。
  一、全局作用域
  1. 定义：
    - 全局作用域是JavaScript中的最高作用域，任何在全局作用域中声明的变量和函数都可以在脚本的任何地方访问。

  2. 全局变量的声明：
    - 全局变量可以通过  `var` 、 `let` 、 `const`  或直接赋值来声明。
    - 使用  `var`  声明的变量会成为全局对象的属性（在浏览器中是  `window`  对象）。
    - 使用  `let`  和  `const`  声明的全局变量不会直接成为全局对象的属性，但仍然可以在全局作用域中访问。
  var globalVar = "全局变量"; // 使用 var 声明的全局变量
  let globalLet = "全局 let 变量"; // 使用 let 声明的全局变量
  const globalConst = "全局 const 变量"; // 使用 const 声明的全局变量

  function test() {
    console.log(globalVar); // 可以访问全局变量
    console.log(globalLet); // 可以访问全局 let 变量
    console.log(globalConst); // 可以访问全局 const 变量
  }

  test();
  二、全局变量的查找
  1. 查找顺序：
    - 当在函数或块中访问变量时，JavaScript会首先在当前作用域中查找该变量。如果找不到，则会向上查找父作用域，直到找到该变量或达到全局作用域。
  2. 访问全局变量：
    - 在任何函数或块中都可以直接访问全局变量。

  var name = "全局名字";
  function greet() {
    console.log("你好, " + name); // 访问全局变量
  }

  greet(); // 输出: 你好, 全局名字

  三、全局变量的影响
  1. 命名冲突：
    - 使用全局变量时需要小心命名冲突，尤其是在大型项目中，不同模块可能会使用相同的变量名，导致意外的覆盖和错误。
  2. 污染全局作用域：
    - 过多的全局变量会导致全局作用域被污染，增加了代码的复杂性和维护难度。建议尽量减少全局变量的使用。

  四、避免全局变量
  1. 使用局部作用域：
    - 尽量在函数内部声明变量，以限制它们的作用域。
  2. 模块化：
    - 使用模块化编程（如 ES6 模块）来封装代码，避免将变量暴露在全局作用域中。
  (function() {
    var localVar = "局部变量"; // 局部变量，仅在此函数内可访问
    function showLocal() {
      console.log(localVar); // 可以访问局部变量
    }
    showLocal();
  })();

  console.log(localVar); // 报错: localVar is not defined

  五、总结
  - 全局代码查找变量是指在全局作用域中定义的变量和函数，这些变量和函数可以在整个脚本中访问。
  - 全局变量的查找顺序是从当前作用域开始，向上查找父作用域，直到找到变量或达到全局作用域。
  - 使用全局变量时需要小心命名冲突和全局作用域污染，推荐使用局部作用域和模块化编程来减少全局变量的使用。
   -->
</head>
<body>

  <script>
    // 全局变量
    var globalVar = "全局变量";
    let globalLet = "全局 let 变量";
    const globalConst = "全局 const 变量";

    function test() {
      console.log(globalVar); // 可以访问全局 var 变量
      console.log(globalLet); // 可以访问全局 let 变量
      console.log(globalConst); // 可以访问全局 const 变量
    }

    test();

    function greet() {
      console.log("你好, 全局名字");
    }
    greet(); // 可以直接调用全局函数
  </script>
  
</body>
</html>